<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <!-- unpkg的CDN: -->
    <link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <!-- jsdelivr的CDN: -->
    <script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <script type="text/javascript">
        (function (e, t) {
            var i = document, n = window; var l = i.documentElement; var r, a; var d, o = document.createElement("style"); var s; function m() { var i = l.getBoundingClientRect().width; if (!t) { t = 540 } if (i > t) { i = t } var n = i * 28 / e; o.innerHTML = "html{font-size:" + n + "px;}" } r = i.querySelector('meta[name="viewport"]'); a = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"; if (r) { r.setAttribute("content", a) } else { r = i.createElement("meta"); r.setAttribute("name", "viewport"); r.setAttribute("content", a); if (l.firstElementChild) { l.firstElementChild.appendChild(r) } else { var c = i.createElement("div"); c.appendChild(r); i.write(c.innerHTML); c = null } } m(); if (l.firstElementChild) { l.firstElementChild.appendChild(o) } else { var c = i.createElement("div"); c.appendChild(o); i.write(c.innerHTML); c = null } n.addEventListener("resize", function () { clearTimeout(s); s = setTimeout(m, 300) }, false); n.addEventListener("pageshow", function (e) { if (e.persisted) { clearTimeout(s); s = setTimeout(m, 300) } }, false); if (i.readyState === "complete") { i.body.style.fontSize = "16px" } else { i.addEventListener("DOMContentLoaded", function (e) { i.body.style.fontSize = "14px" }, false) }
        })(750, 750);
    </script>
    <style>
        .container {
            padding: 0;
        }

        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: white
        }

        ul {
            list-style-type: none
        }

        img {
            width: 100%;
            vertical-align: bottom;
        }

        /*列表*/
        .mescroll {
            position: fixed;
            top: 44px;
            bottom: 0;
            height: auto;
        }

        /*回到顶部按钮*/
        .mescroll-totop {
            bottom: 70px;
        }


        /*展示上拉加载的数据列表*/
        .news-list li {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }

        .news-list .new-content {
            font-size: 14px;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }

        .nav-tabs {
            border-bottom: 1px solid #ddd;
            border-top: 0.5px #ddd solid;
            display: flex;
            justify-content: space-between;
        }

        .nav-tabs .active a {
            border: none !important;
            border-bottom: solid 3px #3498db !important;
        }

        .cart1 {
            position: relative;
            display: flex;
            justify-content: flex-start;
            border-bottom: 1px #ddd solid;
            padding: 1rem 0.7rem;

        }

        .cart1 .has-img {
            padding: 0rem 1rem 0rem 0rem;
        }

        .cart1 .has-img img {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
        }

        .cart1 .tool {
            position: absolute;
            right: 1rem;
            top: 1.5rem;
        }

        .cart1 .tool2 {
            display: flex;
            justify-content: space-between;

        }

        .has-bold {
            font-weight: bold;
            padding-bottom: 0.5rem;
            font-size: 1rem;
        }

        .has-job {
            font-size: 0.5rem;
            color: #888888;
        }

        .has-btn {
            background: #469abb;
            color: #fff;
            padding: .142857rem .5rem;
            border-radius: 5px;
        }

        .has-green-btn {
            background: #31a57b;
            color: #fff;
            padding: .142857rem 1.5rem;
            border-radius: 2px;
            margin-top: 0.5rem;
        }

        .has-red-btn {
            background: red;
            color: #fff;
            padding: .142857rem 1.5rem;
            border-radius: 2px;
            margin-top: 0.5rem;
        }

        .tool p {
            font-size: 0.5rem;
            color: #888888;
        }

        .has-p {
            margin-top: 0.5rem;
        }

        .layer1 {
            border-radius: 1.357143rem 1.357143rem 0rem 0rem
        }

        .layer1>ul>li {
            text-align: center;
            font-size: 1rem;
            padding-top: .642857rem;
            border-bottom: 1px #ddd solid;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item-table">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#table1" data-toggle="tab">邀请投递</a></li>
                <li><a href="#table2" data-toggle="tab">邀请面试</a></li>
                <li><a href="#table3" data-toggle="tab">面试记录</a></li>
            </ul>

        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="table1">
                <div class="cart1">
                    <div class="has-img">
                        <img src="./image/t1.png">
                    </div>
                    <div class="content">
                        <p class="has-bold">吉林省云代教育科技有限公司</p>
                        <p class="has-job">邀约职位:销售</p>
                    </div>
                    <div class="tool">
                        <div class="has-btn" id="btn-affirm">同意</div>
                    </div>
                </div>
                <!-- <div class="layer1">
                    <ul>
                        <li>简历1</li>
                        <li>简历2</li>
                        <li>简历3</li>
                    </ul>
                </div> -->

            </div>
            <div class="tab-pane fade" id="table2">
                <div class="cart1">
                    <div class="has-img">
                        <img src="./image/t1.png">
                    </div>
                    <div class="content">
                        <p class="has-bold">吉林省云代教育科技有限公司</p>
                        <p class="has-job">邀约职位:经理助理</p>
                        <p class="has-job">面试时间:2020-05-11 15:44:02</p>
                        <div class="tool2">
                            <div class="has-green-btn" id="accept">接受</div>
                            <div class="has-red-btn" id="refuse">拒绝</div>
                        </div>
                    </div>
                </div>
                <div class="cart1">
                    <div class="has-img">
                        <img src="./image/t1.png">
                    </div>
                    <div class="content">
                        <p class="has-bold">吉林省云代教育科技有限公司</p>
                        <p class="has-job">邀约职位:经理助理</p>
                        <p class="has-job">面试时间:2020-05-11 15:44:02</p>
                        <div class="tool2">
                            <div class="has-green-btn" id="enter" style="padding: .142857rem 0.5rem;">进入面试直播间</div>
                        </div>
                    </div>
                </div>
                <div id="3" class="cart1">
                    <div class="has-img">
                        <img src="./image/t1.png">
                    </div>
                    <div class="content">
                        <p class="has-bold">吉林省云代教育科技有限公司</p>
                        <p class="has-job">邀约职位:经理助理</p>
                        <p class="has-job">面试时间:2020-05-11 15:44:02</p>
                        <div class="tool2">
                            <div class="has-p">距离面试开始: 0</div>
                            <div class="has-red-btn" style="padding: .142857rem 0.5rem;" id="chanl">取消预约</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="table3">
                <div class="cart1">
                    <div class="has-img">
                        <img src="./image/t1.png">
                    </div>
                    <div class="content">
                        <p class="has-bold">吉林省云代教育科技有限公司</p>
                        <p class="has-job">签约职位</p>
                        <p class="has-job">面试状态:待处理</p>

                    </div>
                    <div class="tool">
                        <p>签约状态:</p>
                        <p>未签约</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/layer/mobile/layer.js"></script>
<script>
    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //为tab按钮绑定事件
            // page = 0;
            // var key = $(this).parent().index(); // tab下标
            // var data = {}; // 给后台传递的数据（用于筛选）

            // 成功回调后执行的语句
            // htmls(res);
            // switch (key) {
            //     case 0: // 未处理
            //         name = '未处理';
            //         data = { name: '邀请投递', page: 0 };
            //         break;
            //     case 1: // 纳入考虑
            //         name = '纳入考虑';
            //         data = { name: '邀请面试', page: 0 };
            //         break;
            //     case 2: // 暂不考虑
            //         name = '暂不考虑';
            //         data = { name: '面试记录', page: 0 };
            //         break;
            // }
            // $.ajax({
            //     type: "POST",
            //     url: url,
            //     data: data,
            //     success: function (res) {

            //         var html = htmls(res)
            //         var current_page = res.data.current_page;
            //         var last_page = res.data.last_page;
            //          $("#scroller .item-list").html(html);
            //          if (current_page < last_page) {
            //             $(".pull-loading").html("查看更多数据");
            //         }
            //     }
            // });

        });
        $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");//默认触发

        $('#btn-affirm').click(function () {
            alert(1)
            //底部对话框
            layer.open({
                content: `<div class="layer1">
                    <ul id="items">
                        <li class="item" id="1">简历1</li>
                        <li class="item" id="2">简历2</li>
                        <li class="item" id="3">简历3</li>
                    </ul>
                </div>`
                , btn: ['取消']
                , skin: 'footer'
            });
            $('#items').on('click', 'li', function () {
                alert(this.id);
                layer.closeAll();
            })
        })
        $('#accept').click(function () {
            alert(2);

        })
        $('#refuse').click(function () {
            alert(3)
        })
        $('#enter').click(function () {
            alert(4)
        })
        $('#chanl').click(function () {
            alert(5)
            layer.open({
                content: '您确定要取消预约吗？'
                , btn: ['确定', '取消']
                , yes: function (index) {
                    $("#3").remove(); 
                    layer.close(index);
                }
            });
        })

    });

</script>

</html>